---
title: Your first page
---


::doc-component-demo
---
title: Let's write your first page
---

The first time you run the Tairo project, you should see the Tairo Welcome page. To replace it, you need to create a [Single-File Vue Component](https://vuejs.org/guide/scaling-up/sfc.html#single-file-components) in `app/pages/index.vue`.


:doc-heading{label="Empty page example"}


```vue [app/pages/index.vue]
<script setup lang="ts">
// set compile time meta information
definePageMeta({
  // static meta information can be added to vue-router, we use it
  // to generate the search index in the demo
  title: 'My first page',
})

// meta information can also be added to the head
useHead({
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})

// Here you can define your page logic
</script>

<template>
  <div>
    <!-- The page content goes here -->
  </div>
</template>
```

:doc-heading{label="Discover components"}

Take a look at the `demo/pages/` folder to see how to assemble your page. You will see that most pages are built with reusable components,
some are prefixed by `Base`, `Tairo`, `Demo` and a few with `Addon`.

- `Base` prefix is used for UI components (Shuriken UI components), sometimes known as atoms, like buttons, inputs, etc... 
- `Tairo` prefix is used for components that are specific to the project layouts, or reusable components that have no dependencies
- `Demo` prefix is used for components that are specific to the demo, like the quick search, widgets, etc...
- `Addon` prefix is for components that have external dependencies, like the markdown editor, charts, etc...


:::doc-message{type="muted" icon="ph:info"}
Use the quick search to find the component you need, try it now with `ctrl+k` (or `⌘+k` on mac).
:::

---

Useful resources:

- [Learn about pages directory on nuxt.com](https://nuxt.com/docs/guide/directory-structure/pages)
- [Learn template syntax on vuejs.org](https://vuejs.org/guide/essentials/template-syntax.html)

::




::doc-nav
---
prev: /documentation/setup/first-page
next: /documentation/setup/first-api-route
---
::